<template>
    <div class="Box">
      <div class="box">
        <img src="./assets/pc/bc.jpg" alt="">
        <div class="box-7">
          <!-- 倒计时 -->
          <p> {{ num }}</p>
          <img src="./assets/pc/time.png" alt="">
        </div>
      </div>
      <div class="box-1">
        <!-- 答题区 -->
        <div v-html="nulltips" class="box_1"></div>
        <img src="./assets/pc/infomation.png" alt="">
      </div>
      <div class="box-2">
        <img src="./assets/pc/anther.png" alt="">
      </div>
      <div class="box-6">
        <img src="./assets/computed.png" alt="">
      </div>
      <div class="box-3">
        <img src="./assets/pc/tip.svg" alt="">
      </div>
     
  
      <div class="box-4" @click="ck">
        <!-- 公布答案 -->
        <img src="./assets/pc/answer.png" alt="">
      </div>
      <div class="box-5">
        <img src="./assets/pc/listname.png" alt="">
      </div>
      <div class="box-8" :class="change ? 'start' : 'next'" @click="timer"></div>
  
      <div v-show="isShow" class="daan" @click="ck">
        <div class="mb">
          <img src="./assets/telanswer.png" alt="">
        </div>
        <p>{{ nulltips1 }}</p>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        change: true,
        getname: '开始',
        isShow: false,
        nulltips: '',
        nulltips1: '',
        arr: 0,
        num: 0,
        // 数据内容
        tips: [
          {
            subject: `<h3>1、资产、负债和所有者权益是（　）。</h3> A、表示企业经营成果的会计要素 <br></br> B、表示企业经营状况的会计要素<br></br> &nbspC、表示企业财务状况的会计要素 <br></br> D、表示企业现金流量的会计要素`,
            answer: "C",
          },
          {
            subject: `<h3>2、下列各项中引起资产和权益同时增加的经济业务是（　）。</h3> A、购入材料，货款未付  <br></br> B、以银行存款支付采购办公用品款<br><br>&nbspC、以银行存款偿还银行借款<br><br> D、用银行存款购入机器一台`,
            answer: "A",
          },
          {
            subject: `<h3>3、不同形态的资产的流动性不同，其获利能力也就不同，下面说法中正确的是（　）。</h3>A、流动性越高，其获利能力可能越高 <br><br>B、流动性越高，其获利能力可能越低 <br><br>C、流动性越低，其获利能力可能越低 <br><br>D、资产的获利能力与流动性成正比`,
            answer: "B",
          },
          {
            subject: `<h3>4、管理会计的服务对象侧重于（　）。</h3>A、股东 <br><br>B、外部集团<br></br>C、债权人<br></br>D、企业内部的经营管理`,
            answer: "D",
          },
          {
            subject: `<h3>5、下列不需要进行会计处理的业务有（　）。<br></h3>A、用盈余公积转增资本<br><br>B、用资本公积转增资本<br><br>C、用税前利润补亏<br><br>D、用税后利润补亏<br><br>E、发放股票股利`,
            answer: "CDE",
          },
          {
            subject: `<h3>6 、外购资产，必须先通过（　）进行核算，然后再进行转固处理。</h3>`,
            answer: "在建工程",
          },
          {
            subject: `<h3>7、企业出售无形资产发生的净损失，应当计入（　）。<h3/>`,
            answer: "营业外支出",
          },
          {
            subject: `<h3>8、企业对未使用、不需用的固定资产也应计提折旧，计提的折旧计入（　）。</h3>`,
            answer: "管理费用",
          },
          {
            subject: `<h3>9、工资薪金百分八，超过部分可结转。（猜一个政策）</h3>`,
            answer: "职工教育经费",
          },
          {
            subject: `<h3>10、一子每月享一千，多个子女皆可享。（猜一个个税专项附加扣除项目）</h3>`,
            answer: "子女教育",
          },
          {
            subject: `<h3>11、交完房租不吃土，在沪一月一千五。（猜一个税专项附加扣除项目）</h3>`,
            answer: "住房租金",
          },
          {
            subject: `<h3>12、四项服务过半百，进项再抵十个点。（猜一个政策）</h3>`,
            answer: "加计抵减",
          },
        ],
      }
    },
    mounted() {
      // 定时器
      setInterval(() => {
        this.num--;
        if (this.num < 0) {
          this.num = 0
        }
      }, 1000)
    },
    methods: {
      timer() {
        // 点击拿到题目
        if (this.num == 0) {
         
          if (this.change == true) {
            this.change = false
          }
          if (this.arr < this.tips.length) {
            this.num = 10
            this.isShow = false
            this.nulltips = this.tips[this.arr].subject
            this.nulltips1 = this.tips[this.arr].answer
            this.arr++
          }
  
        }
      },
      ck() {
        if (this.num == 0) {
          this.isShow = !this.isShow
        }
      }
    }
  }
  </script>
  <style scoped>
  .start {
    background-image: url(./assets/pc/start.svg);
    width: 190px;
    height: 100px;
  }
  
  .next {
    background-image: url(./assets/pc/next.svg);
    width: 190px;
    height: 100px;
  }
  
  .Box {
    margin: auto;
    position: relative;
    width: 1250px;
    height: 580px;
    /* outline: 1px solid red; */
  }
  
  .daan {
    position: relative;
    position: absolute;
    top: 90px;
    left: 240px;
  }
  
  .daan>.mb {
    position: absolute;
    width: 1240px;
    height: 570px;
    top: -85px;
    left: -235px;
    background-color: rgba(0, 0, 0, 0.447);
    /* outline: 1px solid red; */
  }
  
  .daan>p {
    position: absolute;
    font-size: 30px;
    color: white;
    top: 100px;
    left: 200px;
    width: 400px;
    height: 100px;
    text-align: center;
    /* outline: 1px solid red; */
  }
  
  .daan img {
    position: absolute;
    width: 800px;
    height: 400px;
    top: 70px;
    left: 230px;
    background-color: rgb(0, 0, 0);
  
  }
  
  .box img {
    width: 1250px;
    height: 580px;
  }
  
  .box>.box-7 img {
    width: 150px;
    height: 150px;
  }
  
  .box>.box-7 {
    position: relative;
    margin-top: -550px;
    margin-left: 1000px;
  }
  
  .box-7>p {
    position: absolute;
    color: white;
    font-size: 40px;
    top: 45px;
    left: 60px;
  
  }
  
  .box-1 {
    position: relative;
    position: absolute;
    top: 90px;
    left: 300px;
    color: white;
  }
  
  .box_1 {
    position: absolute;
    top: 30px;
    left: 40px;
    /* text-align: center; */
    font-size: 20px;
    width: 610px;
    height: 360px;
    /* outline: 1px solid red; */
  
  }
  
  .box-1 img {
    width: 700px;
  }
  
  .box-2 {
    position: absolute;
    top: 50px;
    left: 100px;
  }
  
  .box-2 img {
    width: 25%;
  }
  
  .box-3 {
    position: absolute;
    top: 10px;
    left: 530px;
  }
  
  .box-3 img {
    width: 55%;
  }
  
  .box-4 {
    position: absolute;
    top: 475px;
    left: 750px;
  }
  
  .box-4 img {
    width: 100%;
  }
  
  .box-5 {
    position: absolute;
    top: 475px;
    left: 355px;
  }
  
  .box-5 img {
    width: 100%;
  }
  
  .box-6 {
    position: absolute;
    top: 370px;
    left: 60px;
  }
  
  .box-6 img {
    width: 70%;
  }
  
  .box-8 {
    position: relative;
    position: absolute;
    top: 470px;
    left: 550px;
  }
  
  .box-8>span>button {
    font-size: 30px;
  }
  </style>